<template>
  <view class="user-info">
    <view class="left">
      <view class="default-avatar">
        <u-icon v-if="!isUserInfo" name="account" color="#000" size="30" />
        <div v-if="!isUserInfo" style="width: 100%;height: 100%;position: absolute">
          <get-userinfo />
        </div>
        <image v-if="isUserInfo && userInfo.avatar" :src="userInfo.avatar" class="avatar" />
      </view>

      <view v-if="isLogin" class="nickname-phone">
        <view class="nickname">{{ userInfo.name }}</view>
        <view class="phone">{{ $utils.desensitizePhone(userInfo.mobile) }}</view>
      </view>
      <view v-else class="unlogin-name" @click="onLogin">
        登录/注册
        <view class="get-phone-btn">
          <get-phone />
        </view>
      </view>
    </view>

    <!-- TODO 展示条件：1、已登录 2、用户信息完善进度未达100% -->
    <view v-if="isLogin" class="finish-info-btn" @click="onFinishPersonalInfo">
      <text class="btn-text">完善信息</text>
      <u-icon size="15" color="#000" name="arrow-right" />
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  name: 'HeaderInfo',
  data() {
    return {}
  },
  computed: {
    ...mapState(['isLogin', 'userInfo', 'isFrozen', 'isUserInfo'])
  },
  methods: {
    /**
			 * 登录/注册
			 */
    onLogin() {},

    onFinishPersonalInfo() {
      this.$utils.navigateToPage('/pagesMine/personalInfo')
    }
  }
}
</script>

<style lang="scss" scoped>
	.user-info {
		@include flex-between;
		padding: 0 30rpx;

		.left {
			flex: 1;
			@include flex-column-center;
			gap: 10rpx;

			.default-avatar {
				width: 100rpx;
				height: 100rpx;
				background-color: #D8D8D8;
				border: 1px solid #FFF;
				border-radius: 50%;
				@include flex-center;
			}

			.unlogin-name {
				position: relative;

				.get-phone-btn {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 1000;
					opacity: 0;
				}
			}

			.nickname-phone {
				flex: 1;

				.nickname {
					width: 80%;
					font-weight: bolder;
          font-size: 36rpx;
					@include text-ellipsis;
				}

				.phone {
					font-size: 24rpx;
					padding-top: 6rpx;
				}
			}
		}

		.finish-info-btn {
			width: 180rpx;
			padding: 5rpx 0;
			border-radius: 50rpx;
			background-color: #fff36d;
			@include flex-center;
			gap: 10rpx;

			&:active {
				opacity: 0.9;
			}

			.btn-text {
				font-size: 28rpx;
			}
		}
	}

	.default-avatar {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
</style>
